<template>
    <div class="search"> 
        <div class="search-top f-b-r">     
            <div class="s-t-input">
                <el-input v-model="searchKey" class="w-50 m-2" placeholder="   " :prefix-icon="Search" @input="getSearchInfo"/> 
            </div>
            <div class="s-t-close" @click.prevent="goToBack">
                <svg t="1680691295609" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2311" width="16" height="16"><path d="M550.848 502.496l308.64-308.896a31.968 31.968 0 1 0-45.248-45.248l-308.608 308.896-308.64-308.928a31.968 31.968 0 1 0-45.248 45.248l308.64 308.896-308.64 308.896a31.968 31.968 0 1 0 45.248 45.248l308.64-308.896 308.608 308.896a31.968 31.968 0 1 0 45.248-45.248l-308.64-308.864z" p-id="2312"></path></svg>
            </div>
        </div> 
        <div class="search-bottom">    
            <div class="s-t-author" v-if="authorList.length != 0">
                <div class="header sta-header">作者</div>
                <ul class="b-content sta-content">
                    <li class="content-li a-li f-b-r" v-for="item in authorList" :key="item.author_id" @click="goToDetail('author', item.author_id)">
                        <div class="a-name" v-html="highlightText(item.a_name, searchKey)"></div>
                        <div class="a-dynasty">[{{ item.d_name }}]</div>
                    </li>
                </ul>
            </div>
            <div class="s-t-poetry" v-if="poetryList.length != 0">
                <div class="header stp-header">作品</div>
                <ul class="b-content stp-content">
                    <template v-for="item2 in poetryList" :key="item2.pid">
                        <!-- <li class="content-li b-li" v-for="item2 in poetryList" :key="item2.pid"> -->
                        <li class="content-li b-li" v-if="item2.a_name || item2.a_name != ''" @click="goToDetail('poetry', item2.pid)">
                            <el-row>
                                <el-col :xs="12" class="p-col">
                                    <div class="a-name">{{ item2.p_title }}</div>
                                </el-col>
                                <el-col :xs="12" class="p-col">
                                    <div class="a-dynasty">[{{ item2.p_dynasty }}]</div>
                                </el-col>
                                <el-col :xs="24" class="p-col">
                                    <div class="ellipsis" v-html="highlightText(item2.p_content, searchKey)"></div>
                                    <!-- <div class="ellipsis">{{ item2.p_content }}</div> -->
                                </el-col>
                            </el-row>
                        </li>
                    </template>
                </ul>
            </div>
        </div> 
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue"
import { Search } from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router'
import searchStore from '../search.store'
import { highlightText } from '@/utils/util'

const router = useRouter()
const route = useRoute()
const searchSe = searchStore()
let searchKey = ref<string>('')

// 点击关闭
const goToBack = () => {
    router.back()
}

// 获取搜索信息
let timer = ref<any>(null)
let poetryList = ref<any>([])
let authorList = ref<any>([])
let searchType = ref<string>('')
searchType.value = route.params.searchType + ''
searchKey.value = route.params.searchKey + ''
let pageNum = ref<number>(1)
let pageSize = ref<number>(30)
const getSearchInfo = (val: string) => {
    if(!val || val == ''){
        poetryList.value = []
        authorList.value = []
        clearTimeout(timer.value)
        return 
    }
    if(timer.value) clearTimeout(timer.value)
    timer.value = setTimeout(() => {
        if(searchType.value == 'poetry') { 
            const searchPoetryData = {
                searchType: 'V',
                searchText: searchKey.value,
                pageNum: pageNum.value,
                pageSize: pageSize.value
            }
            searchSe.searchPoetry(searchPoetryData).then((res: any) => {
                if(res.status == 'success') {
                    poetryList.value = res.results.results2
                    clearTimeout(timer.value)
                }
            })
        } else {
            const searchAuthorData = {
                searchType: 'N',
                searchText: searchKey.value,
                pageNum: pageNum.value,
                pageSize: pageSize.value
            }
            searchSe.searchAuthor(searchAuthorData).then((res: any) => {
                if(res.status == 'success') {
                    authorList.value = res.results.results2
                    clearTimeout(timer.value)
                }
            })
        }
    }, 200)
}

onMounted(() => {
    getSearchInfo(searchKey.value)
})

// 点击查看详情
const goToDetail = (type: string, id: any) => {
    if(type == 'poetry') {
        router.push({ 
            name: 'poetryDetail',
            params: {
                id: id
            }
        })
    } else if(type == 'author') {
        router.push({ 
            name: 'authorDetail',
            params: {
                authorId: id
            }
        })
    }
}
</script>

<style lang="less" scoped>
.search {
    width: 100%;
    min-height: 100vh;
    background-color: var(--bg-color-gray);
    .search-top {
        width: 100;
        height: var(--navigation-bar-height);
        background-color: var(--bg-color);
        padding: 0 1rem;
        .s-t-close {
            path {
                fill: var(--icon-color-gray);
            }
        }
        :deep(.el-input) {
            .el-input__wrapper {
                border-radius: 2rem;
                padding: 0 1rem;
            }
        }
    }
    .search-bottom {
        .header {
            height: 3rem;
            line-height: 2rem;
            font-size: 16px;
            color: var(--font-color-gray);
            padding-top: 1rem;
            padding-left: 1rem;
            box-sizing: border-box;
        }
        .b-content {
            height: max-content;
            background-color: var(--bg-color);
            .content-li {
                border-bottom: 1px solid var(--border-color-gray1);
                padding: 0 1rem;
            }
            .r-t-left {
                font-size: 13px;
                color: var(--font-color-gray);
            }
            .r-t-more {
                padding-right: 0.5rem;
                font-size: 16px;
                color: var(--font-color-gray);
            }
            .a-li {
                height: 3rem;
                line-height: 3rem;
            }
            .b-li {
                height: 4rem;
                padding: 0.5rem 1rem;
                box-sizing: border-box;
                .p-col {
                    height: 1.5rem;
                    line-height: 1.5rem;
                    .a-dynasty {
                        text-align: right;
                    }
                }
            }
        }
    }
}
</style>